import React, { Component } from "react";

export default class App extends Component {
  myRef = React.createRef();
  state = {
    a: "",
  };
  render() {
    return (
      <section>
        <div>
          <div>{this.state.a}</div>
          {/* 通过ref绑定的表单元素就是非受控组件,不是很建议使用,因为如果有其他组件需要用这个值的话
            无法触发render,得不到最新的值
          */}
          <input type="text" ref={this.myRef} />
          <button
            onClick={() => {
              this.setState({
                a: this.myRef.current.value,
              });
            }}
          >
            点击
          </button>
        </div>
      </section>
    );
  }
}
